<template>
  <div class="news-list">
    <!-- <nav class="header"><span class="back">&lt;</span>新闻列表</nav> -->
    <content-body>
    <nav-bar title="新闻列表" />
      <ul>
        <li class="list" v-for="news in newsList" :key="news.id">
          <router-link :to="{name: 'news.detail', query: {id: news.id}}">
            <img class="cover" :src="news.img_url" alt="">
            <div class="list-text">
              <p class="title">{{news.title}}</p>
              <p class="list-summary">{{news.zhaiyao}}</p>
              <p class="info">
                <span class="click-num">点击数：{{news.click}}</span>
                <span class="publish-time">发表时间：{{news.add_time | convertTime('YYYY-MM-DD')}}</span>
              </p>
            </div>
          </router-link>
        </li>
      </ul>
    </content-body>
  </div>
</template>
<script>
export default {
  data () {
    return {
      newsList: []
    }
  },
  created () {
    this.$axios
      .get('getnewslist')
      .then(res => {
        console.log(res.data)
        this.newsList = res.data.message
      })
      .catch(err => {
        console.log('新闻列表获取出错', err)
      })
  }
}
</script>
<style lang="less" scoped>
.news-list {
  margin: 0 0 3.4375rem 0;
}
.list {
  position: relative;
  margin-bottom: 1rem;
}
.cover {
  position: absolute;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}
.list-text {
  height: 5rem;
  margin-left: 6rem;

  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .list-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0.3rem 0;
  }

  .info {
    position: absolute;
    bottom: 0;
    font-size: 14px;
    white-space: nowrap;
    color: #bbb;

    span:last-of-type {
      margin-left: 3rem;
    }
  }
}
</style>
